<template>
  <div class="hideBg">
    <div class="shopHide file_move">
      <div class="treeHeader clearfix">
        <span class="treeName fl">选择要移动到文件夹</span>
        <span class="pageClose fr" @click="cancelMoveTo">×</span>
      </div>
      <div class="tree-body">
        <div class="tree_nav"><span>将资源移动到：</span></div>
        <ul class="ztree">
          <li>
            <!-- 展开root_open  收起 root_close -->
            <span class="button root_open"></span>
            <!-- 选中+active -->
            <a title="根目录" :class="{active: currFolderID === 'root'}" @click="selectFolder('root')">
              <span class="node_name">根目录</span>
            </a>
            <ul class="level0 ">
              <li class="level1" v-for="item, index in foldersList">
                <span class="button center_docu"></span>
                <a class="level1" :class="{active: currFolderID === item.rescode}" @click="selectFolder(item)">
                  <span class="node_name">{{item.title}}</span>
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="hideBot"><span class="btnSure" @click="confirmMoveTo">确定</span> <span class="btnCancel" @click="cancelMoveTo"> 取消</span></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "moveTo",
    props: {
      // 需要移动的资源rescode
      resourceToMove: {
        type: String,
        default: ''
      },
      // 文件夹列表
      foldersList: {
        type: Array,
        default: []
      },
      // 当前所在的文件夹
      currFolderFromFather: {
        type: String,
        default: ''
      }
    },
    data(){
      return {
        currFolderID: ''
      }
    },
    methods: {
      /**
       * 确定
       */
      confirmMoveTo(){
        if(this.currFolderID === this.currFolderFromFather){
          // 没有变换过文件夹，执行取消按钮的操作
          return this.cancelMoveTo();
        }
        this.$emit('exec-moveto', {
          toFolderID: this.currFolderID === 'root' ? "" : this.currFolderID,
          resource: this.resourceToMove
        });
      },
      cancelMoveTo(){
        this.$emit('cancel-moveto', false);
      },
      /**
       * 选择了文件夹
       * @param item
       */
      selectFolder(item){
        if(item === 'root'){
          this.currFolderID = 'root';
        }else{
          this.currFolderID = item.rescode;
        }
      }
    },
    mounted(){
      this.currFolderID = this.currFolderFromFather;
    }
  }
</script>

<style scoped>
  .hideBg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 1000;
  }

  .shopHide {
    width: 800px;
    height: 500px;
    position: absolute;
    background-color: #fff;
    margin: auto;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border: 1px solid #00a4e6;
    border-radius: 3px;
  }

  /*------确定  返回  ------*/
  .hideBot {
    text-align: center;
  }

  .btnSure,
  .btnCancel {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    width: 110px;
    text-align: center;
    margin: 0px 10px;
    border: 1px solid #00a4e6;
    border-radius: 3px;
    cursor: pointer;
  }

  .btnSure {
    background-color: #00a4e6;
    color: #fff;
  }

  .btnSure:hover {
    background-color: #2a8cd7;
    color: #fff;
  }

  .btnCancel {
    background-color: #fff;
    border: 1px solid #00a4e6;
    color: #01a4e7;
  }

  .btnCancel:hover {
    background-color: #00a4e6;
    color: #fff;
    text-decoration: none;
  }

  .treeHeader {
    height: 30px;
    line-height: 30px;
    padding-left: 15px;
    border-bottom: 1px solid #e5e5e5;
    background-color: #f8f8f8;
  }

  .tree-body {
    position: relative;
    margin: 15px;
    min-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e1e1e1;
  }

  .tree_nav {
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #e1e1e1;
    padding-left: 10px;
  }

  .ztree {
    padding: 5px;
    color: #333;
    overflow-x: hidden;
  }

  .ztree li {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 26px;
    text-align: left;
    white-space: nowrap;
    outline: 0;
  }

  .ztree li span.button {
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 21px;
    height: 27px;
    display: inline-block;
    vertical-align: middle;
    border: 0 none;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url(../../../assets/images/treeicon.png);
  }

  .ztree li span.button.root_open {
    background-position: -105px -65px;
  }

  .ztree li span.button.root_close {
    background-position: -126px -65px;
  }

  .ztree li a {
    padding-right: 3px;
    margin: 0;
    cursor: pointer;
    width: 90%;
    height: 26px;
    color: #333;
    background-color: transparent;
    text-decoration: none;
    vertical-align: top;
  }

  .ztree li a,
  .ztree li span.node_name {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ztree li a.active,
  .ztree li a:hover {
    background-color: #00a4e6;
    color: #fff;
  }

  .ztree li span {
    line-height: 26px;
    margin-right: 2px;
  }

  .ztree li a,
  .ztree li span.node_name {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ztree li span.node_name {
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 36px 0 5px;
    border-radius: 2px;
  }

  .ztree li ul {
    margin: 0;
    padding: 0 0 0 18px;
  }

  .ztree li span.button.center_docu {
    background-position: -84px -21px;
  }

  .pageClose {
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding-right: 10px;
    font-size: 20px;
  }
  .pageClose:hover {
    color: #00A4E6;
  }
</style>
